<template>
  <uni-popup
    ref="specSelectPopupRef"
    type="bottom"
    @change="popupChange"
    backgroundColor="#ffffff"
  >
    <div>
      <div v-for="spec in specList" :key="spec.id">
        <text class="title">{{ spec.title }}</text>
        <div class="attr-box">
          <template v-for="attr in spec.attrList">
            <div
              @click="changeSkuValue(spec.title, attr.title)"
              :style="[
                {
                  color: isActive(spec.title, attr.title) ? 'blue' : '',
                },
                {
                  color: isDisabled(spec.title, attr.title) ? 'red' : '',
                },
              ]"
              :key="attr.id"
              class="attr"
            >
              {{ attr.title }}
            </div>
          </template>
        </div>
      </div>
    </div>
  </uni-popup>
</template>

<script>
// 判断对象1是否包含对象2的所有属性
function IfContainObj(obj1, obj2) {
  let Bool = true;
  for (const key in obj2) {
    if (obj2[key] !== obj1[key]) Bool = false;
  }
  return Bool;
}
// 判断2个对象是否相同
function IfSame(obj1, obj2) {
  var obj1keys = Object.keys(obj1);
  var obj2keys = Object.keys(obj2);
  if (obj2keys.length !== obj1keys.length) return false;

  for (let i = 0; i <= obj1keys.length - 1; i++) {
    let key = obj1keys[i];
    if (!obj2keys.includes(key)) return false;
    if (obj2[key] !== obj1[key]) return false;
  }
  return true;
}
import { handleAssembleSku } from "./formatSkus";
export default {
  props: {
    specList: Array,
    skuList: Array,
  },
  data() {
    return {
      show: false,
      skus: [], // 新组装的sku
      selectSkuObjs: {},
    };
  },
  computed: {
    // 当前sku
    selectSku({ skus, selectSkuObjs }) {
      if (!skus) return null;
      let i = skus.findIndex((item) =>
        IfSame(item.specAttrsObj, selectSkuObjs)
      );
      return i !== -1 ? skus[i] : null;
    },
  },
  methods: {
    open() {
      const sku = handleAssembleSku(this.specList, this.skuList);
      console.log("组装后的sku", sku);
      this.skus = sku;
      this.$nextTick(() => {
        this.$refs.specSelectPopupRef.open();
      });
    },
    // 是否禁止选中(无库存)
    isDisabled(v1, v2) {
      // if (!this.isLimmitStock) return false;
      if (!this.skus) return false;
      if (this.selectSkuObjs[v1] === v2) return false; // 过滤已选中
      if (!this.selectSkuObjs[v1]) {
        let Index = this.skus.findIndex((item) => {
          return IfSame(item.specAttrsObj, {
            ...this.selectSkuObjs,
            [v1]: v2,
          });
        });
        if (Index !== -1) return !this.skus[Index]?.stockNum;
      }
      let newSkus = this.skus.filter((item) => item?.stockNum);
      let dd = newSkus.filter((item) => {
        return IfContainObj(item.specAttrsObj, {
          ...this.selectSkuObjs,
          [v1]: v2,
        });
      });
      return !dd.length;
    },
    // 是否选中
    isActive(v1, v2) {
      return this.selectSkuObjs[v1] === v2;
    },
    // 选中sku集
    changeSkuValue(v1, v2) {
      if (this.isDisabled(v1, v2)) return;
      this.selectSkuObjs[v1] === v2
        ? this.$delete(this.selectSkuObjs, [v1])
        : this.$set(this.selectSkuObjs, [v1], v2);
      console.log("选中sku集2", this.selectSkuObjs);
      this.$nextTick(() => {
        console.log("选中sku", this.selectSku);
      });
    },
    popupChange(e) {
      console.log("e", e);
    },
  },
};
</script>

<style lang="scss">
.title {
  font-size: 38rpx;
  font-weight: bold;
}
.attr-box {
  display: flex;
  align-items: center;
  .attr {
    border: 1px solid black;
    margin-right: 10rpx;
    padding: 10px;
  }
}
</style>
